/* pages/inviteFriends/inviteFriends.less */
@import "../../../commin/commin.less";
page {
    background: #F5F6FA;
  
    .head {
      width: 750rpx;
      height: 652rpx;
      background-size: 100% 100%;
    }
    .header-title{
      .service-row{
        display: inline-block;
      }
      .position(absolute, 260rpx, 0, 0, 0);
      text-align: center;
      .fontsize(30rpx);
      font-family: PingFang SC;
      font-weight: bold;
      color: @white-color;
      .wallet{
          color: #FFE2AD;
          .fontsize(24rpx);    
          .margins(auto,5rpx,auto,5rpx);     
      }
      .service-wrap{
        .fontsize(24rpx);
          margin-top: -7rpx;  
          .service{
              
              border-radius: 10rpx;  
              border-width: 600;
              .paddings(10rpx,10rpx,10rpx,10rpx);
          }
      }
  }
  
    .btn_invitation {
      width: 500rpx;
      height: 92rpx;
      line-height: 92rpx;
      background: #2293FB;
      border-radius: 90rpx;
      margin: -46rpx auto 0;
      font-size: 36rpx;
      color: #FEFEFE;
    }

    .btn_invitation:hover {
      width: 500rpx;
      height: 92rpx;
      line-height: 92rpx;
      background: #47a4fa;
      border-radius: 90rpx;
      margin: -46rpx auto 0;
      font-size: 36rpx;
      color: #FEFEFE;
    }
    
    .rule {
      text-align: center;
      margin-top: 20rpx;
      font-size: 26rpx;
      color: #999;
    }
  

  
    .friends {
      padding: 40rpx 0 63rpx 0;
      margin: 90rpx 32rpx 0 32rpx;
      background: #FFFFFF;
      border-radius: 17rpx;
      background-size: 100% 100%;
  
    .f_title {
      font-size: 34rpx;
      font-weight: 500;
      color: #232323;
      line-height: 64rpx;
      text-align: center;
    }
  
      .f_view {
        width: 620rpx;
        height: 100rpx;
        margin: 20rpx auto 0;
        display: flex;
        justify-content: center;
        align-items: center;
        border:1rpx solid #2B97FC;
        background-color: #E8F0FF;
        padding: 47rpx 0 55rpx 0 ;
  
        .f_li {
          width: 294rpx;
  
          .li_title {
            font-size: 24rpx;
            text-align: center;
            color: #707485;
          }
  
          .li_num {
            display: flex;
            justify-content: center;
            align-items: baseline;
  
            .num {
              font-size: 48rpx;
              font-weight: bold;
              color: #2293FB;
            }
  
            .text {
              font-size: 28rpx;
              color: #2293FB;
            }
          }
        }
  
        .line {
          width: 2px;
          height: 90rpx;
          background: #D4D5D8;
        }
      }
    }
  

  
    .friends_list {
      overflow: hidden;
      .list_title {
        width: 582rpx;
        height: 80rpx;
        padding: 0 24rpx;
     
        margin: 34rpx auto 40rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
  
        text {
          font-weight: 400;
          color: #232323;
          font-size: 33rpx;
        }
      }
  
      .ul {
        padding: 0 24rpx;
        .li {
          height: 106rpx;
          position: relative;
          background: rgba(232,240,255,0.5);
          border-radius: 16px;
          line-height: 106rpx;
          padding: 0 47rpx;
          margin-bottom: 16rpx;
          .li_left {
          
            float: left;
            .serial{
              width: 44rpx;
              height: 36rpx;
              margin: 0 10rpx 0 0;
            }
          
            .serial_number {
              width: 32rpx;
              height: 32rpx;
              margin: 0 10rpx 0 0;
              font-size: 24rpx;
              line-height: 30rpx;
              text-align: center;
              color: #FFF;
              background: #969694;
              border-radius: 50%;
            }
            .phone{
              font-size: 26rpx;
              color: #707485;
            }
          }
          .reward{
            font-size: 26rpx;
            color: #575C71;
         
            float: right;
            .rewardPrice{
              color:#FC724C;
              font-size: 28rpx;
            }
          }
        }
  
       
      }
      .period{
        font-size: 26rpx;
        color: #707485;
        text-align: center;
      }
    }
  }